<template>
  <div class="toolbar-container">
    <!-- 对齐按钮组 -->
    <t-button v-for="btn in alignButtons" :key="btn.command" theme="primary" variant="text" size="small"
      :title="btn.title" @click="alignControls(btn.command)">
      <template #icon><t-icon :name="btn.icon" /></template>
    </t-button>

    <!-- 操作按钮组 -->
    <t-button v-for="btn in actionButtons" :key="btn.command" :theme="btn.theme" variant="text" size="small"
      :title="btn.title" @click="handleAction(btn.command)">
      <template #icon><t-icon :name="btn.icon" /></template>
    </t-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const alignButtons = ref([
  { command: 'top', icon: 'format-horizontal-align-top', title: '顶端对齐' },
  { command: 'bottom', icon: 'format-horizontal-align-bottom', title: '底端对齐' },
  { command: 'left', icon: 'format-vertical-align-left', title: '左边对齐' },
  { command: 'right', icon: 'format-vertical-align-right', title: '右边对齐' }
]);

const actionButtons = ref([
  { command: 'delete', icon: 'delete', title: '删除', theme: 'danger' },
  { command: 'copy', icon: 'copy', title: '复制', theme: 'primary' }
]);

const selectedControls = ref(new Set());

const alignControls = (type) => {
  if (selectedControls.value.size === 0) return;
  const controlsList = [...selectedControls.value];
  let referenceValue;

  switch (type) {
    case 'top':
      referenceValue = Math.min(...controlsList.map(c => c.y));
      controlsList.forEach(c => (c.y = referenceValue));
      break;
    case 'bottom':
      referenceValue = Math.max(...controlsList.map(c => c.y + c.height));
      controlsList.forEach(c => (c.y = referenceValue - c.height));
      break;
    case 'left':
      referenceValue = Math.min(...controlsList.map(c => c.x));
      controlsList.forEach(c => (c.x = referenceValue));
      break;
    case 'right':
      referenceValue = Math.max(...controlsList.map(c => c.x + c.width));
      controlsList.forEach(c => (c.x = referenceValue - c.width));
      break;
  }
};

const deleteControls = () => {
  if (selectedControls.value.size === 0) return;
  selectedControls.value.clear();
};

const copyControls = () => {
  if (selectedControls.value.size === 0) return;
  const newControls = [...selectedControls.value].map(control => ({
    ...JSON.parse(JSON.stringify(control)),
    x: control.x + 10,
    y: control.y + 10,
  }));
  selectedControls.value = new Set(newControls);
};
</script>

<style scoped>

</style>